﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="wpOceans" />
    <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png" />
    <title>Pengu - eCommerce HTML5 Template</title>
    <link href="/assets/css/themify-icons.css" rel="stylesheet" />
    <link href="/assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/assets/css/flaticon.css" rel="stylesheet" />
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/css/animate.css" rel="stylesheet" />
    <link href="/assets/css/owl.carousel.css" rel="stylesheet" />
    <link href="/assets/css/owl.theme.css" rel="stylesheet" />
    <link href="/assets/css/slick.css" rel="stylesheet" />
    <link href="/assets/css/slick-theme.css" rel="stylesheet" />
    <link href="/assets/css/swiper.min.css" rel="stylesheet" />
    <link href="/assets/css/owl.transitions.css" rel="stylesheet" />
    <link href="/assets/css/jquery.fancybox.css" rel="stylesheet" />
    <link href="/assets/css/odometer-theme-default.css" rel="stylesheet" />
    <link href="/assets/sass/style.css" rel="stylesheet" />
    <style>
        .reg {
            width: 600px
        }

        .reg label {
            margin-bottom: 5px
        }

        .reg input {
            margin-bottom: 5px
        }

        .reg .form-group {
            position: relative;
        }

        .reg .input-group-btn {
            position: absolute;
            right: 20px;
            top: 35px;
        }

        .reg .tp-accountBtn {
            font-size: 16px;
            padding: 10px 20px;
            border: 2px solid #F56061;
            width: 100%;
            background: #F56061;
            color: #fff;
            transition: all 0.4s ease-in-out 0s;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <img src="/assets/images/preloader.png" alt="" />
                </div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="wpo-header-style-3">
            <!-- end topbar -->
            <div class="wpo-site-header">
                <nav class="navigation navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div class="mobail-menu">
                                    <button type="button" class="navbar-toggler open-btn">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar first-angle"></span>
                                        <span class="icon-bar middle-angle"></span>
                                        <span class="icon-bar last-angle"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-6">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="/"><img src="/assets/images/logo.svg"
                                            alt="logo" /></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-1 col-1">
                                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                                    <button class="menu-close"><i class="ti-close"></i></button>
                                    <ul class="nav navbar-nav mb-2 mb-lg-0">
                                        <li>
                                            <a href="/">Home</a>
                                        </li>
                                        <li><a href="/web/shop/">Shop</a></li>
                                        <li>
                                            <a href="/web/cart/">Cart</a>
                                        </li>
                                        <li><a class="active" href="/web/contact/">Contact Us</a></li>
                                    </ul>
                                </div>
                                <!-- end of nav-collapse -->
                            </div>

                        </div>
                    </div>
                    <!-- end of container -->
                </nav>
            </div>
        </header>
        <!-- end of header -->

        <!-- start wpo-page-title -->
        <section class="wpo-page-title">
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12">
                        <div class="wpo-breadcumb-wrap">
                            <h2>Contact</h2>
                            <ol class="wpo-breadcumb-wrap">
                                <li><a href="/">Home</a></li>
                                <li>SMS</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </section>
        <!-- end page-title -->

        <!-- start wpo-contact-pg-section -->
        <section class="wpo-contact-pg-section section-padding">
            <div class="container reg" style="padding-top: 0;">
                <div class="tp-accountForm form-style" style="padding-top: 0;margin:0 auto">
                    <div class="fromTitle">
                        <h2>Register</h2>
                        <p>Register into your pages account</p>
                    </div>
                    <form class="register needs-validation" novalidate method="POST" action="/web/payment/" id="payment"
                        name="payment">
                        <div class="row" style="width:90%">
                            <div class="col-lg-12 col-md-12 col-12">
                                <label>
                                    <span class="text-danger">*</span>
                                    Email
                                </label>
                                <input required class="form-control" type="text" id="email" name="email"
                                    placeholder="Please input email">
                            </div>
                            <div class="col-lg-12 col-md-12 col-12">
                                <div class="form-group">
                                    <label>
                                        <span class="text-danger">*</span>
                                        Password
                                    </label>
                                    <input required class="form-control" class="pwd" type="password" placeholder=""
                                        value="" name="pass">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button"><i
                                                class="fa fa-eye"></i></button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-12">
                                <div class="form-group">
                                    <label>
                                        <span class="text-danger">*</span>
                                        Re-enter password
                                    </label>
                                    <input required class="form-control" class="pwd" type="password" placeholder=""
                                        value="" name="pass">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default reveal" type="button">
                                            <i class="fa fa-eye"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-12">
                                <label>
                                    <span class="text-danger">*</span>
                                    Phone Number
                                </label>
                                <input required type="text" class="form-control" id="email" name="email"
                                    placeholder="Please input email">
                            </div>
                            <div class="col-lg-12 col-md-12 col-12">
                                <div class="form-group">
                                    <label>
                                        <span class="text-danger">*</span>
                                        vierf SMS
                                    </label>
                                    <input required name="sms" class="form-control" type="number" maxlength="6"
                                        placeholder="vierf sms code" />
                                    <span class="input-group-btn" style="margin-top: 5px;">
                                        <a style="cursor: pointer;">send code</a>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-12">
                                <button type="submit" class="tp-accountBtn">Register</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- end container -->
        </section>
        <!-- end wpo-contact-pg-section -->

        <!-- start of wpo-site-footer-section -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget about-widget">
                                <div class="logo widget-title">
                                    <img src="/assets/images/logo.svg" alt="blog" />
                                </div>
                                <p>Mattis inelit neque quis donecyir eleng amet. Amet sed et cursus eu euiod.
                                    Egestaerets in morbiet tristique ornare vulputate vitae enim.</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget link-widget">
                                <h4>Easy 30 days returns</h4>
                                <p>30 days money back guarantee</p>
                                <h4>International Warranty</h4>
                                <p>Offered in the country of usage</p>
                                <h4>100% Secure Checkout</h4>
                                <p>PayPal/ MasterCard / Visa</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget newsletter-widget">
                                <div class="widget-title">
                                    <h3>Newsletter</h3>
                                </div>
                                <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
                                <form>
                                    <div class="input-1">
                                        <input type="email" class="form-control" placeholder="Your Email Address.. "
                                            required="" />
                                    </div>
                                    <div class="submit clearfix">
                                        <button type="submit">Subscribe</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end container -->
            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright">Copyright &copy; 2023 Canun By <a
                                    href="http://www.bootstrapmb.com">bootstrapMB</a>. All Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->
    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="/assets/js/modernizr.custom.js"></script>
    <script src="/assets/js/jquery.dlmenu.js"></script>
    <script src="/assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="/assets/js/script.js"></script>
    <script>
        const form = document.querySelector('.register')
        form.addEventListener('submit', event => {
            console.log(123123123)
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            $('.register').addClass('was-validated');
        }, false)
    </script>
</body>

</html>